<template>
  <div class="components-input-presuffix" >
    <div>
      <el-input
        placeholder="请选择资产"
        @focus="handleFocus"
        readonly=""
        @click="openModal"
        v-model="text">
        <i @click="handleEmpty"  slot="suffix" class="el-input__icon el-icon-circle-close"></i>
      </el-input>
    </div>
    <select-assets-modal ref="selectModal" @ok="selectFinsh" ></select-assets-modal>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import SelectAssetsModal from './SelectAssetsModal'

  export default {
    components:{ SelectAssetsModal },
    name: 'SelectAssets',
    data(){
      return {
        inputFlag :true,
        text:""
      }
    },
    props:{
      value:{
        type:String,
        required:false
      },
    },
    watch:{
      value(val){
        this.initData();
      }
    },
    mounted(){
      this.initData();
    },
    methods:{
      initData(){
        if(this.inputFlag){
          this.text = "";
          if(this.value ){
            getAction(`/asset/getInfo/${this.value}`).then(res => {
              if(res.success){
                this.text = res.data.name;
              }
            }).catch(e => console.error(e));
          }
        }
        this.inputFlag = true;
      },
      openModal(){
        this.$refs.selectModal.open();
      },
      handleEmpty(){
        this.text = "";
        this.$emit("input","");
      },
      handleFocus(){
        this.$refs.selectModal.open();
      },
      selectFinsh(row){
        console.log(row.id);
        this.text = row.name
        this.inputFlag = false;
        this.$emit("input",row.id);
      }
    }
  }
</script>

<style scoped>
  el-input{
    cursor:pointer;
  }
</style>
